<!-- 停车场 -->
<template>
  <div class="bg-white relative-box" style="padding: 0 20px 20px">
    <div class="import-btn-box">
      <el-select v-if="systemType == 'businessBuildingOperate'" class="margin-right-10" style="width: 160px" v-model="projectKey" size="mini" placeholder="请选择项目" @change="changeProject">
        <el-option v-for="item in projectOptions" :key="item.projectKey" :label="item.projectName" :value="item.projectKey" />
      </el-select>
      <el-upload :show-file-list="false" style="padding: 0 10px" class="upload-demo" action accept="" :http-request="event => beforeupload(event.file)">
        <el-button type="primary" size="mini">导入数据</el-button>
      </el-upload>
      <el-button type="primary" @click="out()" size="mini">导出数据</el-button>
    </div>

    <el-container v-if="m_MenyTabs_Prop.options.length > 0">
      <el-container>
        <!-- 分区 -->
        <el-header class="relative-box">
          <MenuTabs :PROP.sync="m_MenyTabs_Prop" @MenuSelect="TabMenuSelect"></MenuTabs>
          <el-button class="info-btn" type="primary" size="mini" plain @click="pointClick">详情</el-button>
        </el-header>
        <el-main class="fill-box">
          <explain ref="explain" :data-list="caseList" pageType="park"></explain>
          <div class="flex margin-top-15">
            <!-- 层 -->
            <div class="floor-box">
              <div class="floor-item" :class="activeFloorTab == item.floorKey ? 'active-floor' : ''" v-for="(item, i) in floorList" :key="i" :index="item.floorKey" @click="MenuSelect(item.floorKey)">{{ item.floorName }}</div>
            </div>
            <div class="fill-box flex justify-center flex-1 relative-box">
              <img :src="compassIcon" class="compass-icon" />
              <ImgPoint v-if="model.cadDrawing" class="flex-1" :backImg="model.cadDrawing" :svg-height="model.svgHeight"> </ImgPoint>
              <el-empty class="margin-top-80" v-else description="暂无图片"></el-empty>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-empty v-else description="暂无数据"></el-empty>

    <park-ad-dialog ref="park" :model.sync="m_Detail.form" pageType="parking"></park-ad-dialog>
  </div>
</template>
<script>
  import parkAdDialog from '@c/roomStatus/parkAdDialog';
  import Explain from '@c/roomStatus/explain';
  import ImgPoint from '@c/roomStatus/imgPoint';
  import MenuTabs from '@c/MenuTabs';
  import Api from '../../../api/roomStatus';
  import { projectList } from '@/api';

  export default {
    components: { parkAdDialog, Explain, MenuTabs, ImgPoint },
    data() {
      return {
        floorList: [],
        zoneList: [],
        parkList: [],
        systemType: localStorage.getItem('systemType'),
        projectKey: localStorage.getItem('projectKey'),
        projectOptions: [],
        activeFloorTab: '', //当前选中楼层key
        model: {
          cadDrawing: '',
          svgHeight: '',
        },
        searchParams: {
          projectKey: localStorage.getItem('projectKey'),
          parmDataKey: '',
        },
        m_MenyTabs_Prop: {
          father: this,
          defaultactive: null,
          options: [],
        },
        m_Detail: {
          form: {},
        },
        compassIcon: require('../../../assets/imgs/compass.png'),
        caseList: [
          { name: '停车场建筑面积', icon: require('../../../assets/imgs/park.png'), num: 0 },
          { name: '车位总数', icon: require('../../../assets/imgs/parkAll.png'), num: 2 },
          { name: '已售车位数', icon: require('../../../assets/imgs/sale.png'), num: 0 },
          { name: '本财年收款', icon: require('../../../assets/imgs/income1.png'), num: 0 },
          { name: '本财年收入', icon: require('../../../assets/imgs/income2.png'), num: 0 },
          { name: '截止本财年收款', icon: require('../../../assets/imgs/income1.png'), num: 0 },
          { name: '截止本财年收入', icon: require('../../../assets/imgs/income2.png'), num: 0 },
        ],
      };
    },

    mounted() {
      //businessBuildingOperate 商写运营要独立选择项目 初始为第一个项目
      if (this.systemType == 'businessBuildingOperate') {
        this.getProjectList();
      } else {
        this.GetData();
      }
    },
    //方法集合
    methods: {
      //分区
      async GetData() {
        let res = await Api.listCar(this.searchParams);
        if (res.toCarItemDtos.length > 0) {
          res.toCarItemDtos.forEach(element => {
            element.title = element.partitionName;
            element.show = true;
            element.path = element.partitionKey;
            this.m_MenyTabs_Prop.options.push(element);
          });
          this.m_MenyTabs_Prop.defaultactive = res.toCarItemDtos[0].partitionKey;
          this.setCaseNum(res.toCarItemDtos[0]);
          this.getFloor();
        }
      },

      //楼层
      async getFloor() {
        let res = await Api.listFloorCar({ status: 1, partitionKey: this.m_MenyTabs_Prop.defaultactive });
        this.floorList = res.rows || [];
        this.initSvgAreaData(this.floorList);
        this.getFloorImg();
      },

      //楼层图片
      async getFloorImg() {
        let res = await Api.listImgCar({ status: 1, isUse: 1, floorKey: this.activeFloorTab });
        if (res.rows.length > 0) {
          this.model.cadDrawing = res.rows[0].cadDrawingText;
          this.model.svgHeight = res.rows[0].svgHeight;
        }
      },

      //初始化楼层选中，图例面积数据. 默认选中1层：buildingStorey == 1
      initSvgAreaData(list) {
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          if (item.buildingStorey == 1) {
            this.activeFloorTab = item.floorKey;
            return;
          }
        }
        this.activeFloorTab = list[0].floorKey;
      },

      //set面积 收入等字段
      setCaseNum(res) {
        this.caseList[0].num = res.buidArea || 0;
        this.caseList[1].num = res.parkNum || 0;
        this.caseList[2].num = res.ccParkNum || 0;
        this.caseList[3].num = res.incomeAmount || 0;
        this.caseList[4].num = res.forcastAmount || 0;
        this.caseList[5].num = res.incomeTotalAmount || 0;
        this.caseList[6].num = res.forcastTotalAmount || 0;
      },

      pointClick() {
        let park = this.m_MenyTabs_Prop.options.find(item => {
          return item.path == this.m_MenyTabs_Prop.defaultactive;
        });
        this.m_Detail.form = park;
        this.$refs.park.dialogShow = true;
      },

      //左侧楼层切换
      MenuSelect(key) {
        this.activeFloorTab = key;
        this.getFloorImg();
      },

      //分区tab切换
      TabMenuSelect(path) {
        this.m_MenyTabs_Prop.defaultactive = path;
        let park = this.m_MenyTabs_Prop.options.find(item => {
          return item.path == path;
        });
        this.setCaseNum(park);
        this.getFloor();
      },

      //导入
      beforeupload(file) {
        Api.importCarInfo(file).then(res => {
          this.$message.success('上传成功');
          this.GetData();
        });
      },

      //导出
      out() {
        Api.outCarInfo({ ...this.searchParams }).then(res => {});
      },

      //项目列表
      async getProjectList() {
        let res = await projectList({});
        this.projectOptions = res.rows;
        this.projectKey = res.rows.length > 0 ? res.rows[0].projectKey : '';
        this.searchParams.projectKey = res.rows.length > 0 ? res.rows[0].projectKey : '';
        if (!this.projectKey) return;
        this.GetData();
      },

      async changeProject() {
        this.m_Form.projectKey = this.projectKey;
        this.GetData();
      },
    },
  };
</script>
<style scoped lang="scss">
  .import-btn-box {
    position: absolute;
    right: 10px;
    top: -47px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep .el-dialog .el-dialog__header {
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
  }
  ::v-deep .el-dialog .el-dialog__header .el-dialog__close {
    color: #333;
  }
  .floor-box {
    width: 170px;
    background: #fbfbfb;
    overflow-y: auto;
    .floor-item {
      text-align: center;
      height: 45px;
      line-height: 45px;
      font-size: 16px;
      cursor: pointer;
    }
    .floor-item:hover {
      background: rgba($color: #3384fe, $alpha: 0.05);
      color: #3384fe;
    }
    .active-floor {
      background: rgba($color: #3384fe, $alpha: 0.05);
      color: #3384fe;
    }
  }
  .floor-box::-webkit-scrollbar {
    display: none;
  }
  ::v-deep .menu-box {
    padding-left: 0;
  }
  ::v-deep .el-menu {
    border-right: none;
  }

  ::v-deep .el-container {
    height: 100%;
  }

  .fill-box {
    overflow: hidden;
  }
  .info-btn {
    position: absolute;
    top: 8px;
    right: 0;
    z-index: 100;
  }
  .compass-icon {
    width: 20px;
    height: 25px;
    position: absolute;
    top: 0;
    right: 40px;
    z-index: 10;
  }
</style>
